<template>
    <div class="home">

        <div class="top">
            <van-icon name="arrow-left" size="20px" @click="goback()" />
            <div>反馈建议</div>
            
        </div>
       
        <van-cell-group>
                <van-field
                  v-model="message"
                  rows="2"
                  autosize
                  label="建议"
                  type="textarea"
                  maxlength="100"
                  placeholder="请输入您的建议"
                  show-word-limit
                />
              </van-cell-group>

              <p style="text-align: center;padding-bottom:5px;">感谢您提出宝贵的建议</p>
              <p @click="submit" class="submit">提交</p>
             
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'
    // import BMap from 'BMap'
    // import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'
    import { Toast } from "vant"
    import { Icon } from 'vant'

    export default {
        // 当前组件的名称
        name: 'home',

        data() {
            return {
                message:""
            }
        },

        // 在当前组件中添加其他的自定义组件
        components: {

        },

        /*
            在computed中添加mapState
            如果computed中只有一个辅助函数，后面可以直接写成函数名
        */
        computed: mapState(['token', 'userInfo']), // this.token相当于this.$store.state.token

        methods: {
            goback() {
                this.$router.back()
            },
            submit(){
                if(!this.message){
                    Toast("请输入您的建议")
                    return
                }
                Toast("提交成功")
                this.message=""
            }
        },
        // 生命周期函数,创建实例,可以获取this,但DOM节点还没有创建出来
        created() {
            console.log('created', this.$el)
        },
        // 生命周期函数,当前组件上的所有DOM节点都已经创建出来
        mounted() {
        },



    }


</script>

<!-- 添加scoped属性,将样式的作用域限制在当前组件内,不会影响子组件 -->
<style lang="scss" scoped>
    .home {
        padding-top: 40px;
    }

    .top {
        position: fixed;
        top: 0;
        height: 40px;
        line-height: 40px;
        /* position: relative; */
        font-size: 16px;
        width: 100%;
        background-color: white;
        z-index: 9999;
    }

    .top div {
        text-align: center;

    }

    .van-icon-arrow-left {
        position: absolute;
        top: 10px;
    }
    .submit{
        width: 40%;
        background-color: #1989fa;
        height: 40px;
        line-height: 40px;
        margin: 10px auto;
        color: white;
        text-align: center;
        border-radius: 5px;
    }
    
</style>